<template>
  <el-select
    :placeholder="props.placeholder"
    v-bind="$attrs"
    v-loading="loading"
    element-loading-text="Loading..."
    :element-loading-spinner="svg"
    element-loading-svg-view-box="-10, -10, 50, 50"
    element-loading-background="rgba(122, 122, 122, 0.8)"
    @change="onChange"
  >
    <el-option
      v-for="(item, index) in options"
      :key="index"
      :label="item[props.defaultConf.label]"
      :value="item[props.defaultConf.value]"
    />
  </el-select>
</template>
<script setup>
import { ref, onMounted, defineProps, defineEmits } from "vue";
import { selectData } from "@/api/index.js";
const props = defineProps({
  url: String,
  query: Object,
  placeholder: { type: String, default: "请选择" },
  defaultConf: {
    type: Object,
    default: () => ({ label: "label", value: "value" }),
  },
});
const loading = ref(false);
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `;
const emits = defineEmits(["onSelect"]);
const options = ref([]);
const initData = async () => {
  loading.value = true;
  try {
    const res = await selectData(props.url, props.query);
    options.value = res.data || [];
  } finally {
    loading.value = false;
  }
};
const onChange = (val) => {
  const row = options.value.find((ele) => ele[props.defaultConf.value] === val);
  emits("onSelect", row);
};

onMounted(() => {
  initData();
});
</script>
